<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品画像</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/cphx.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]>
        <script src="../src/js/html5shiv.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="wrapper" id="app">
        <div class="global-content">
            <header class="header">
            </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./tsgz.html" class="tsgz ">
                            态势感知
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qyhx.html" class="qyhx ">
                            企业画像
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:;" class="cphx on">
                            产品画像
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./tdpchx.html" class="tdpchx">
                            特定批次
                            画像
                        </a>
                    </div>

                    <div class="nav-item">
                        <a href="./scxszk.html" class="scxszk">
                            生产销售质控
                        </a>
                    </div>
                </nav>
                <div class="content-box ">
                    <div class="ready_container" :class="isReady?'data-ready':''">
                        <div class="content-box-area flex">
                            <div class="cb-left">
                                <div class="stat stat-1 mb10">
                                    <div class="s-title">全省疫苗上市数量分析</div>
                                    <div class="pl20 pr20 border-box">
                                        <div class="s1-content pb20">
                                            <div class=" flex mb10">
                                                <div class="flex-1 pic_left text-right"><img
                                                        src="../src/img/cphx/pic_sz_left.png" /></div>
                                                <div class="s-t-word f16"><span>五年来上市数量(支)</span></div>
                                                <div class="flex-1 pic_right text-left"><img
                                                        src="../src/img/cphx/pic_sz_right.png" /></div>
                                            </div>
                                            <div class="amount_num text-center mt10 mb30">
                                                <div class="  inline-block mr10" v-for="n in fiveYearAmountStrs">
                                                    <div class="n_item text-center  inline-block " v-if="n!=','">{{n}}
                                                    </div>
                                                    <div class="n_item_sp text-center  inline-block " v-else>，</div>
                                                </div>
                                            </div>
                                            <div class=" flex ">
                                                <div class="flex-1 pic_left text-right"><img
                                                        src="../src/img/cphx/pic_sz_left.png" /></div>
                                                <div class="s-t-word f16"><span>当年上市数量(支)</span></div>
                                                <div class="flex-1 pic_right text-left"><img
                                                        src="../src/img/cphx/pic_sz_right.png" /></div>
                                            </div>
                                            <div class="amount_num amount_num_1 text-center mt10 mb20">
                                                <div class="  inline-block mr10" v-for="n in currentYearAmountStrs">
                                                    <div class="n_item text-center  inline-block " v-if="n!=','">{{n}}
                                                    </div>
                                                    <div class="n_item_sp text-center  inline-block " v-else>，</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="stat stat-2  mb10">
                                    <div class="s-title">各疫苗生产企业上市疫苗数量</div>
                                    <div class="pl20 pr20 mt20">
                                        <table class="common_table text-center" id="">
                                            <thead>
                                                <th style="width: 86px">企业</th>
                                                <th style="width: 181px">五年来上市数量（支）</th>
                                                <th style="width: 180px">当年上市数量（支）</th>
                                            </thead>
                                            <tbody>
                                                <tr style="cursor: pointer;"
                                                    @click="window.location.href='./dcphx.html'">
                                                    <td>荣安</td>
                                                    <td>49387245</td>
                                                    <td>49387245</td>
                                                </tr>
                                                <tr style="cursor: pointer;"
                                                    @click="window.location.href='./dcphx.html'">
                                                    <td>荣安</td>
                                                    <td>49387245</td>
                                                    <td>49387245</td>
                                                </tr>
                                                <tr style="cursor: pointer;"
                                                    @click="window.location.href='./dcphx.html'">
                                                    <td>荣安</td>
                                                    <td>49387245</td>
                                                    <td>49387245</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="stat stat-3">
                                    <div class="s-title">产品风险安全排行榜</div>
                                    <div class="pl20 pr20  mt20">
                                        <table class="common_table text-center">
                                            <thead>
                                                <th style="width: 56px">排名</th>
                                                <th style="width: 262px">产品名称</th>
                                                <th style="width: 129px">风险值/风险等级</th>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>冻干人用狂犬病疫苗（Vero细胞）</td>
                                                    <td>0</td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>冻干型甲型肝炎减毒活疫苗</td>
                                                    <td class="color-yellow">1</td>
                                                </tr>
                                                <tr>
                                                    <td>3</td>
                                                    <td>腮腺炎减毒活疫苗</td>
                                                    <td>0</td>
                                                </tr>
                                                <tr>
                                                    <td>4</td>
                                                    <td>乙型脑炎纯化疫苗</td>
                                                    <td class="color-yellow">1</td>
                                                </tr>
                                                <tr>
                                                    <td>5</td>
                                                    <td>双价肾综合征出血热纯化疫苗</td>
                                                    <td class="color-yellow">1</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="cb-right flex-1">
                                <div class="stat stat-4">
                                    <div class="s-title">全国销售情况与异常反应报告情况</div>
                                    <div class="search_content mb20 pl20 pt20 f16 mt20">
                                        <div class="fx-item flex mb10">
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-1">时间：</span>
                                                <span class="color-blue-form-word">
                                                    <span class="inline-block mr20">
                                                        <input id="id1" value="1" type="radio" checked name="time">
                                                        <label for="id1">5年销量</label>
                                                    </span>
                                                    <span class="inline-block ">
                                                        <input type="radio" value="2" id="id2" name="time">
                                                        <label for="id2">当年销量</label>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="fx-item flex mb10 mt20">
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-1">批号：</span>
                                                <span>
                                                    <select class="form-control  inline-block ">
                                                        <option value="1">20190502</option>
                                                        <option value="2">20190503</option>
                                                        <option value="3">20190504</option>
                                                    </select>
                                                </span>
                                                <span class="click-txt">20190512,20190512</span>
                                            </div>


                                            <div class="flex-1  m-r20">
                                                <span class="l-name l-width-2 pl10">成品品种：</span>
                                                <span>
                                                    <select class="form-control  inline-block ">
                                                        <option value="1">冻干人用狂犬病疫苗（Ver</option>
                                                        <option value="2">冻干人用狂犬病疫苗（Ver</option>
                                                        <option value="3">冻干人用狂犬病疫苗（Ver</option>
                                                    </select>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="fx-item flex mb10">
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-1">企业：</span>
                                                <span>
                                                    <select class="form-control  inline-block ">
                                                        <option value="1">20190502</option>
                                                        <option value="2">20190503</option>
                                                        <option value="3">20190504</option>
                                                    </select>
                                                </span>

                                            </div>
                                            <div class="flex-1 m-r20 ">
                                                <span class="l-name l-width-2 pl10">区域：</span>
                                                <span>
                                                    <input type="text" class="form-control  inline-block "
                                                        placeholder="省，市，县">

                                                </span>
                                            </div>
                                        </div>
                                        <div class="fx-item flex mb10 mt20">
                                            <div class="flex-1 ">
                                                <span class="l-name">不良反应或异常反应：</span>
                                                <span class="color-blue-form-word">
                                                    <span class="inline-block mr20 checkbox">
                                                        <input id="id21" value="1" type="checkbox" checked name="time">
                                                        <label for="id21">全部异常反应</label>
                                                    </span>
                                                    <span class="inline-block checkbox mr20">
                                                        <input type="checkbox" value="2" id="id22" name="time">
                                                        <label for="id22">死亡</label>
                                                    </span>
                                                    <span class="inline-block checkbox mr20">
                                                        <input type="checkbox" value="3" id="id23" name="time">
                                                        <label for="id23">严重残疾</label>
                                                    </span>
                                                    <span class="inline-block checkbox">
                                                        <input type="checkbox" value="4" id="id24" name="time">
                                                        <label for="id24">群体性疑似预防接种异常反应</label>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="text-right pr50">
                                            <button class="mr10" @click="submitForm">提交</button>
                                        </div>
                                    </div>
                                    <div class="country_map relative">
                                        <div>
                                            <v-chart :options="stat2.chartOption" class="echart_c_1 inline-block"
                                                @mouseover="hoverMap" />
                                        </div>
                                        <!--地图上的悬浮框-->
                                        <div v-if="stat2.tipInfo.data&&stat2.tipInfo.data.name&&stat2.tipInfo.data.otherValue"
                                            class="tip-info"
                                            :style="{top:stat2.tipInfo.position.y+'px',left:stat2.tipInfo.position.x+'px'}">
                                            {{stat2.tipInfo.data.name}}<br>
                                            销量：{{stat2.tipInfo.data.otherValue.xl||0}}支<br>
                                            异常反应发生数：{{stat2.tipInfo.data.otherValue.ycfyfss||0}}<br>
                                            异常反应发生率：{{stat2.tipInfo.data.otherValue.ycfyfsl||0}}
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>

                </div>
        </div>
        </section>
    </div>
    </div>
</body>
<script type="text/javascript" src="../src/js/jquery-1.11.1.min.js"></script>
<script src="../src/js/polyfill.min.js"></script>

<script src="../src/js/vue.min.js"></script>
<script src="../src/js/echarts.js"></script>
<script src="../src/js/vue-echarts@4.0.2"></script>
<script src="../src/js/modal.min.js"></script>
<script src="../src/js/chart-options-cp.js"></script>

<script type="text/javascript" src="../src/js/cphx.js"></script>

</html>